<template>
  <view>
    <view class="colorB" style="padding:30rpx;" v-for="(item ,index) in basicList" :index="index" :key="index">
      <view class="mainColor border-10" style="border: 1px solid #fff;">
        <view class="flex justify-between align-center padding-10">
          <view class="text color0">
            <navigator :url="'/equipment/index/index?id='+ item.pileId + '&stationName='+item.pileId">
              桩号：{{item.pileSn}}
            </navigator>
          </view>
        </view>
        <view class=" padding-10">状态：{{pileStatus(item.status )}}</view>
        <view class=" padding-10">接口数量：{{item.gunNum}}</view>
        <view class=" padding-10">电桩类型：{{connectorType(item.pileType)}}</view>
        <view class="padding-10">sim卡号：{{item.iccid}}</view>
        <view class="padding-10">sim卡商：{{simSupp(item.simSupplier)}}</view>
        <!-- <view class="padding-10">运营商：{{item.merchantName}}</view> -->
        <!-- <view class="text padding-10">充电站：{{item.stationName}}</view> -->
        <view class="text padding-10">密钥：{{item.secretKey}}</view>
        <view class="text padding-10">注册时间：{{item.registrationTime}}</view>
      </view>
    </view>
    <!-- 分页 -->
    <uni-pagination show-icon :page-size="queryParams.pageSize" :current="queryParams.pageNum" :total="total"
      @change="change" />
    <view class="btn-view;mainColor border-10">
      <view class="">
        <text
          class="example-info">当前页：{{ queryParams.pageNum }}，数据总量：{{ total }}条，每页数据：{{ queryParams.pageSize }}</text>
      </view>
      <view class="btn-flex ">
        <button class="button word-btn" hover-class="word-btn--hover" :hover-start-time="20" :hover-stay-time="70"
          @click="add"><text class="word-btn-white">增加10条数据</text></button>
        <button class="button" type="default" @click="reset" style="margin-left: 40rpx;">重置数据</button>
      </view>
    </view>
  </view>
</template>
<script>
  import {
    listBasic
  } from "@/api/pile/basic";
  import {
    connectorType,
    pileStatus,
    simSupp
  } from '@/common/dict.js'
  export default {
    data() {
      return {
        connectorTypeList: [],
        pileStatusList: [],
        simSuppList: [],
        searchVal: '',
        tableData: [],
        // 每页数据量
        pageSize: 10,
        // 当前页
        pageCurrent: 1,
        // 数据总量
        total: 0,
        loading: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          pileSn: null,
          status: null,
          businessType: null,
          softwareProtocol: null,
          productionDate: null,
          licenceId: null,
          modelId: null,
          ICCID: null,
          simSupplier: null,
          merchantId: null,
          stationId: null,
          faultReason: null,
        },
        basicList: [],
      }
    },
    created() {
      this.getList()
    },
    methods: {
      changeFlag(info) {
        // console.log(info);
        updateStation(info).then((response) => {
          console.log(response, 'xiugai');
          this.$modal.msgSuccess("修改成功");
          this.open = false;
          this.getList();
        });
      },
      add() {
        this.queryParams.pageSize += 10
        this.getList();
      },
      reset() {
        this.queryParams.pageSize = 10
        this.queryParams.pageNum = 1
        this.getList();
      },
      pileList(item, index) {
        console.log('首页点击', item, index);
      },
      submitForm(form) {
        var that = this
        this.$refs.form.validate().then(res => {
          console.log('表单数据信息', res);
          that.submitBatchAdd()
        }).catch(err => {
          console.log('表单错误信息', err);
        })
      },
      getModelList() {
        listModel().then((response) => {
          this.modelList = response.rows;
          console.log('型号列表', this.modelList);
        });
      },
      seleted(e) {
        this.checkList = e.detail.value
        console.log('点击', this.checkList);
        // console.log(this.basicList[this.checkList].pileId);
        if (this.checkList.length === this.basicList.length) {
          this.seletedAll = true
        }
      },
      seletedAl() {
        if (!this.seletedAll) {
          this.seletedAll = true
          console.log(this.seletedAll);
          this.basicList.map(item => {
            this.checkList.push(item.value)
          })
        } else {
          this.seletedAll = false
          this.checkList = []
        }
      },
      bindTimeChange(e) {
        console.log('时间', e.detail.value);
        this.da.star_time = e.detail.value
      },
      changeSelectMerchant(value) {
        // 清空内容
        // this.createPile.stationId = "";
        // 通过接口查
        getStationListByMerchantId(value).then((response) => {
          console.log(response.data);
          this.basicList = response.data;
        });
      },
      checkStudent(e) {
        this.merchant = e.detail.value
        console.log(this.merchant);
      },
      getMerchantList() {
        getMerchantList().then((response) => {
          this.merchantList = response.rows;
          console.log('运营商', this.merchantList);
        });
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.$refs.popup.open()
        // this.reset();
        this.getMerchantList();
        this.getList()
        this.getDicts('software_protocol').then(response => {
          console.log('软件协议software_protocol', response.data);
          this.softwareProtocol = response.data
        })
        // this.title = "批量添加设备";
        // this.open = true;
      },
      hClose() {
        this.$refs.popup.close()
      },
      getCodeToText(codeStr, codeArray) {
        if (null === codeStr && null === codeArray) {
          return null;
        } else if (null === codeArray) {
          codeArray = codeStr.split(",");
        }
      },
      connectorType(type) {
        connectorType.then(res => {
          this.connectorTypeList = res
        })
        let str = this.connectorTypeList.find(item => {
          return item.dictValue == type
        })
        if (str == undefined) {
          return '一'
        } else {
          return str.dictLabel
        }
      },
      simSupp(type) {
        simSupp.then(res => {
          this.simSuppList = res
        })
        let str = this.simSuppList.find(item => {
          return item.dictValue == type
        })
        if (str == undefined) {
          return '一'
        } else {
          return str.dictLabel
        }
      },
      pileStatus(type) {
        pileStatus.then(res => {
          this.pileStatusList = res
        })
        let str = this.pileStatusList.find(item => {
          return item.dictValue == type
        })
        if (str == undefined) {
          return '一'
        } else {
          return str.dictLabel
        }
      },
      getList() { // 查询设备管理列表
        this.queryParams.params = {};
        listBasic(this.queryParams).then((response) => {
          this.basicList = response.rows;
          // console.log(this.basicList, response.total, "首页信息");
          this.total = response.total;
        });
      },
      // 多选处理
      selectedItems() {
        return this.selectedIndexs.map(i => this.tableData[i])
      },
      // 多选
      selectionChange(e) {
        console.log('多选', e.detail.index)
        this.selectedIndexs = e.detail.index
      },
      //批量删除
      delTable() {
        console.log(this.selectedItems())
      },
      // 分页触发
      change(e) {
        console.log(e.current);
        this.queryParams.pageNum = e.current
        this.getList()
      },
      // 搜索
      search() {
        this.getList(1, this.searchVal)
      }
    }
  }
</script>
<style lang="scss">
  page {
    background-color: $uni-bg-color !important;
  }
</style>
<style lang="scss" scoped>
  .scroll-Y {
    height: 400rpx;
  }

  .uni-group {
    display: flex;
    align-items: center;
  }

  .goods_nav {

    display: flex;

    height: 7%;

    // margin-top: 100rpx;
    // margin-bottom: 100px;
    align-items: center;
    justify-content: space-between;

    .goods_btn {
      // height: 40px;
      width: 50%;
      text-align: center;
      line-height: 40px;
      background: #2979ff;
      border-radius: 45px;
      color: #fff;
    }

  }

  .startBtn {
    width: 50%;
    margin-right: 20rpx;
    text-align: center;
    line-height: 40px;
    border-radius: 45px;
    color: #fff;
    background-color: #2979ff;
  }
</style>